<template>
	<view class="container">
		<u-navbar leftIconColor="#fff" title="寄售藏品" :autoBack="true" placeholder></u-navbar>

		<view class="pad-32">
			<view class="bg-theme1 pad-24 radius24">
				<image class="goods-cover radius24" :src="goodsInfo.cover" mode="aspectFill"></image>
				<view class="mar-top-bottom-20 color-theme font-w-600 font-32">{{goodsInfo.name}}</view>
				<view class="betweenX font-28 pad-top-bottom-25 color-white">
					<view class="color-grey">藏品编号</view>
					<view>#{{goodsInfo.codeInfo.code}}</view>
				</view>
				<view class="betweenX font-28 pad-top-bottom-25">
					<view class="color-grey">合约地址</view>
					<view class="centerY">
						<text>{{getString(goodsInfo.codeInfo.tx_hash)}}</text>
						<setCopy :content="goodsInfo.codeInfo.tx_hash">
							<template v-slot:content>
								<image class="copy" src="../../static/icon/copy-dark.png"></image>
							</template>
						</setCopy>
					</view>
				</view>
			</view>

			<view class="bg-theme1 pad-24 radius24 mar-top-24">
				<view class="font-28 color-white">设置售价</view>
				<view class="bg-theme1 centerXY mar-top-24 radius16">
					<text class="mar-right-20 mar-left-152 font-30 color-white">￥</text>
					<input :disabled="disabled" @input="IntInput" placeholder-class="input-class" placeholder="请输入寄售价格"
						class="price-input color-white" type="number" v-model.number="price">
				</view>
			</view>

			<!-- 收入账号 -->
			<view class="bg-theme1 pad-24 radius24 mar-top-24">
				<view class="font-28 color-white">收入账号</view>
				<view v-for="item in payList" :class="item.switchPay ? 'on': ''" @click="hanldeSwitch(item)"
					class="betweenX payType font-28 bg-theme1 pad-left-right-16 pad-top-bottom-25 mar-top-24">
					<view class="color-grey">{{item.name}}</view>
					<view class="centerY" v-if="item.isShow">
						<text class="color-disable mar-right-16">更快更便捷</text>
						<image v-if="item.switchPay" class="uncheck" src="../../static/icon/checked-icon.png"></image>
						<image v-else class="uncheck" src="../../static/icon/uncheck-icon.png"></image>
					</view>

					<view v-else @click="hanldePayList(item.id)" class="button-pay">去开通</view>
				</view>
			</view>

			<view class="bg-theme1 pad-24 radius24 mar-top-24">
				<view class="font-28 color-white">预计收入</view>
				<view class="betweenX font-28 pad-top-bottom-25">
					<view class="color-grey">总售价</view>
					<view class="color-white">￥{{totalPrice}}</view>
				</view>
				<view class="betweenX font-28 pad-top-bottom-25">
					<view class="color-grey">综合服务费（{{parseInt(priceInfo.service_fee_rate * 100)}}%）</view>
					<view class="color-white">-￥{{service}}</view>
				</view>
				<view class="betweenX font-28 pad-top-bottom-25">
					<view class="color-grey">预计收入</view>
					<view class="color-white">￥{{income}}</view>
				</view>
			</view>

			<view class="bg-theme1 pad-24 radius24 mar-top-24">
				<view class="font-28 color-white">寄售须知</view>


				<view class="font-24 color-grey pad-top-bottom-10">
					<u-parse :content="sale_notes"></u-parse>
				</view>
				<!-- <view class="font-24 color-grey pad-top-bottom-10">2、寄售收入的增值部分,请您主动申报个人所得税;</view> -->
				<!-- <view class="font-24 color-grey pad-top-bottom-10">3、注意: 同一账号短时间内累计取消 3 次订单，将会被限购一段时间;</view> -->
			</view>
		</view>


		<!-- 确认金额 -->
		<my-popup :content="`您确认以${price}出售吗？`" :title="`￥${price}`" :show="isPopup" @cancel="isPopup = false"
			@confirm="hanldeConfirm"></my-popup>
		<u-popup :show="isPass" round="12" mode="bottom" closeable @close="isPass = false">
			<view class="pad-32 bg-uopup">
				<view class="font-32 text-center font-w-600 mar-top-60">请输入操作密码</view>

				<view class="text-center mar-top-24"><text>￥</text> <text class="font-48 font-w-600">{{price}}</text>
				</view>
				<view class="centerY betweenX mar-top-20">
					<view class="font-24 color-grey">收入账号</view>
					<view class="centerY gap20">
						<template v-for="item in payList">
							<view v-if="item.switchPay"
								class="bg-theme1 radius12 color-theme pad-left-right-12 pad-top-bottom-6 font-24">
								{{item.name}}
							</view>
						</template>
					</view>
				</view>

				<view class="centerX mar-top-bottom-76">
					<u-code-input @finish="hanldeFinish" focus dot v-model="act_secret" :maxlength="6"></u-code-input>
				</view>
			</view>
		</u-popup>

		<view class="button-box pad-left-right-32 pad-top-bottom-6 bg-theme1 centerY">
			<u-button :customStyle="{borderRadius:'50rpx',border:0,}" :disabled="disabled" class="button flex-w"
				@click="hanldeGrounding">确认寄售</u-button>
		</view>

		<!-- 确认退出 -->
		<my-popup content="你还未设置操作密码" confirmText="去设置" :show="isPswPopup" @cancel="isPswPopup = false"
			@confirm="hanldePswConfirm"></my-popup>
	</view>
</template>

<script>
	// 接口地址
	import {
		marketAdd,
		userWalletOPen,
		openWallet,
		payPlat,
		marketAddPre,
		configIndex,
		checkPwdIsset,
		userWalletInfo,
		addOpenWalletOrder,
		cashierPay
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 输入金额
				price: '',
				// 获取页面信息
				goodsInfo: uni.getStorageSync('saleGoods'),
				// 操作密码框
				isPass: false,
				// 确认寄售框
				isPopup: false,
				// 操作密码
				act_secret: '',
				// 全部支付方式
				payList: [],
				// 寄售的收款方式
				payArray: [],
				// 利率扣费
				service: "0.00",
				// 预计收入
				income: "0.00",
				// 总售价
				totalPrice: '0',
				// 价格限制
				priceInfo: {},
				// 购买须知
				sale_notes: '',
				// 未设置操作密码
				isPswPopup: false,
				// 禁止寄售
				disabled: false,
			}
		},
		onLoad() {
			this.getPayPlat();
			this.getMarketAddPre();
		},
		methods: {
			// 跳转去设置操作密码
			hanldePswConfirm() {
				this.isPswPopup = false;
				uni.navigateTo({
					url: '/pages/my/operPsw'
				})
			},
			// 获取寄售
			getMarketAddPre() {
				marketAddPre({
					goods_code_id: this.goodsInfo.codeInfo.id
				}).then(res => {
					this.priceInfo = res.data;
				}).catch(err => {
					if (err.msg == '该藏品暂时不允许寄售') {
						this.disabled = true;
					}
				})

				// 寄售须知
				configIndex({
					code_arr: ['sale_notes']
				}).then(res => {
					this.sale_notes = res.data.sale_notes;
				})
			},
			// 字符串替换
			getString(text) {
				if (text) {
					return text.replace(/(.{6}).*(.{4})/, "$1********$2")
				}
			},
			// 密码输入完毕开始寄售
			hanldeFinish() {
				let data = {
					goods_code_id: this.goodsInfo.codeInfo.id,
					act_secret: this.act_secret,
					price: this.price,
					allow_pay_plat: this.payArray
				}

				marketAdd(data).then(res => {
					uni.$u.toast('寄售成功');
					setTimeout(() => {
						let pages = getCurrentPages(); //获取页面实例
						let nowPage = pages[pages.length - 1]; //当前页面实例
						let prevPage = pages[pages.length - 2]; //上一级页面实例

						prevPage.$vm.isRefresh()
						uni.navigateBack({ //返回
							delta: 1
						})
					}, 500)


					this.act_secret = '';
					this.isPass = false;
				}).catch(() => {
					this.act_secret = '';
					this.isPass = false;
				})
			},
			// 切换支付方式
			hanldeSwitch(item) {
				if (item.isShow) {
					item.switchPay = !item.switchPay;
				}
			},
			// 打开密码框
			hanldeConfirm() {
				this.isPopup = false;
				this.isPass = true;
			},
			// 切换支付方式
			hanldeTypePay(inx) {
				this.pay = inx;
			},
			// 开通钱包
			hanldePayList(platId) {
				uni.showLoading({
					title: '开通中...'
				})

				userWalletOPen({
					plat_id: platId
				}).then(res => {

					let {
						open_data,
						need_pay_open_fee
					} = res.data;

					uni.hideLoading();
					// 官方打开的支付
					if (open_data == "") {
						uni.$u.toast('正在对接，敬请期待~');
						return
					}

					// 跳转获取手续费
					if (need_pay_open_fee) {
						this.getJump(platId, open_data);
						return;
					}

					// 快付通
					if (platId == 13) {
						userWalletInfo({
							plat_id: 13
						}).then(res => {
							uni.navigateTo({
								url: '/pages/kftPay/kftPay'
							})
						}).catch(err => {
							uni.showModal({
								title: '提醒',
								content: '去开通快付通',
								success: (res) => {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/kftPay/kftPay'
										})
									}
								},

							})
						})
					}

					// 连连支付
					if (platId == 11) {
						// #ifdef APP-PLUS
						uni.navigateTo({
							url: '/pages/web-view/web-view?url=' + open_data.redirect_url
						})
						// #endif
						// #ifdef H5
						window.location.href = open_data.redirect_url
						// #endif
					}
				})
			},
			// 封装开通手续费
			getJump(platId, open_data) {
				uni.showModal({
					title: '提醒',
					content: open_data,
					success: (res) => {
						if (res.confirm) {
			
							// 创建支付订单
							addOpenWalletOrder({
								plat_id: platId
							}).then(order => {
			
								// 去支付
								cashierPay({
									order_id: order.data.order_id,
									pay_plat: platId,
									return_url: 'https://h5.xuenuo8.cn/pages/my/wallet?jump=page'
								}).then(pay => {
			
									let url = pay.data.pay_data.pay_url;
									// #ifdef APP-PLUS
									if (platId == 11) {
										plus.runtime.openURL(
											`https://h5.xuenuo8.cn/llPay.html?url=${encodeURIComponent(url)}`
										)
									} else {
										uni.navigateTo({
											url: '/pages/web-view/web-view?url=' + url
										})
									}
									// #endif
									// #ifdef H5
									window.location.href = url
									// #endif
								})
							})
						}
					},
				})
			},
			// 获取平台支付方式
			getPayPlat() {
				payPlat({
					scene: 'market'
				}).then(pay => {
					let {
						lists
					} = pay.data;

					// 获取自己开通的钱包
					openWallet().then(res => {
						let {
							yes
						} = res.data;

						lists.map(item => {
							item.isShow = false;
							item.switchPay = false;
							for (let key in yes) {
								if (item.id == key) {
									item.isShow = true;
									this.isPay++
								}
							}
						})

						// 判断开通了几个钱包 全部开通选择第一个钱包
						for (let i = 0; i < lists.length; i++) {
							if (this.isPay == lists.length) {
								this.pay = 0;
								lists[i].switchPay = true;
								break;
							} else {
								if (lists[i].isShow) {
									this.pay = i;
									lists[i].switchPay = true;
									break;
								}
							}
						}
						this.payList = lists;
					})
				})
			},
			// 上架
			hanldeGrounding() {
				// 价格
				if (this.price == '') {
					uni.$u.toast('请输入寄售价格');
					return
				}

				// 寄售最高价
				if (new Number(this.priceInfo.trans_max_price) > 0) {
					if (this.price > new Number(this.priceInfo.trans_max_price)) {
						uni.$u.toast(`藏品寄售价格不能大于${this.priceInfo.trans_max_price}`);
						return
					}
				}

				// 寄售最低价
				if (this.price < new Number(this.priceInfo.trans_min_price)) {
					uni.$u.toast(`藏品寄售价格不能小于于${this.priceInfo.trans_min_price}`);
					return
				}

				// 收款账户
				this.payArray = this.payList.map(item => {
					if (item.switchPay) {
						return item.id;
					}
				}).filter(l => l != undefined);

				if (this.payArray.length == 0) {
					uni.$u.toast('请选择收款账户');
					return
				}

				// 查询是否设置操作密码
				checkPwdIsset({
					check: ['act_secret']
				}).then(res => {
					if (res.data.info.act_secret) {
						this.isPopup = true;
					} else {
						this.isPswPopup = true;
					}
				})
			},
			// 不能输入小数
			IntInput(e) {
				const v = e.detail.value

				// 计算利率
				this.totalPrice = new Number(v == '' ? 0 : v)
				this.service = new Number(v * this.priceInfo.service_fee_rate).toFixed(2)
				this.income = new Number(v - (v * this.priceInfo.service_fee_rate)).toFixed(2)

				const zero = /^(0{2,})|[^0-9]/g
				let final = ''
				if (!v) {
					final = ''
				} else {
					final = v.toString().replace(zero, (v) => {
						return ''
					})

					if (final.split('')[0] * 1 === 0) {
						final = final.slice(1) - 0 || ''
					}
				}
				this.$nextTick(() => {
					this.price = final.toString() || ''
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;
		padding-bottom: 100rpx;

		.bg-uopup {
			background: linear-gradient(147deg, #f2f6ff, #fff 37%);
			border-radius: 24rpx 24rpx 0 0;
		}

		.button-pay {
			background: linear-gradient(270deg, #df0007, #df0007);
			color: #fff;
			font-size: 24rpx;
			line-height: 44rpx;
			padding: 0 20rpx;
			border-radius: 20rpx;
		}

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		::v-deep .u-code-input__item {
			border-radius: 12rpx;
			background: #ececec;
			border: 0 none !important;
		}

		.goods-cover {
			display: block;
			width: 100%;
			height: 320rpx;
		}

		.payType {
			border: 2rpx solid $uni-bg-theme1;
			border-radius: 16rpx;

			.color-grey {
				color: $uni-theme !important;
			}
		}

		.on {
			border: 2rpx solid $uni-theme !important;
		}

		.uncheck {
			display: block;
			width: 40rpx;
			height: 40rpx;
		}

		.copy {
			display: block;
			width: 28rpx;
			height: 28rpx;
		}

		.price-input {
			height: 88rpx;
		}

		.input-class {
			color: #ababab;
			font-size: 28rpx;
		}


		.button-box {
			position: fixed;
			width: 100%;
			bottom: 0;

			.button-price {
				margin-right: 100rpx;
			}

			.button {
				background: $uni-bg-theme;
				color: #fff;
				text-align: center;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 50rpx;
			}
		}
	}
</style>